import React, {Component} from 'react';
// import "./Song.css";
import "./Song.css"
import Fetch from "../Fetch";
import {ArrowLeftOutlined,SearchOutlined,MoreOutlined,PlusSquareOutlined,MessageOutlined,ShareAltOutlined,PlayCircleOutlined,MenuUnfoldOutlined} from "@ant-design/icons";

class Song extends Component {
    constructor(props) {
        super(props);
        this.state={
            id:this.props.location.state.id,
            creator:[],
            tracks:[],
            idArray:[],
            rgba:0,
            dataArray:[],
        }
    }
    render() {
        return (
            <div id={"song"}>
                {/*表头*/}
                <div className={"top"} style={{backgroundColor:`rgba(0,0,0,${this.state.rgba})`}}><div><ArrowLeftOutlined /> <span> 歌单</span> </div>
                    <div><SearchOutlined /> <span><MoreOutlined /></span> </div></div>
                <div className={"top-root"} style={{background:`url(${this.state.creator.avatarUrl})`}}>
<div style={{display:"flex"}} className={"header"}>
    <div className={"top-left"}>
        <img src={this.state.creator.avatarUrl} alt=""/>
    </div>
    <div className={"top-right"}>
        <p>些许哦也</p>
        <p><img src={this.state.creator.avatarUrl} alt=""/> <span>{this.state.creator.nickname}</span></p>
        <p className={"top-right-title"}>{this.state.creator.signature}</p>
    </div>
</div>
                </div>
{/*                收藏,评论*/}
<div className={"comment"}>
     <span className={"span"}><PlusSquareOutlined />3888.9万</span>  <span className={"span"}><MessageOutlined />88.9</span><span className={"span"}><ShareAltOutlined />37399</span>
</div>
{/*                歌单*/}
<div className={"Gdan"}>
    <p className={"vip"}>
        <svg t="1607051623016" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="35495" width="200" height="200">
            <path
                d="M870.2464 316.7744l-119.0912 53.8624a33.8944 33.8944 0 0 1-40.0896-9.2672l-161.9968-201.8304c-13.7216-16.5888-39.2192-16.384-52.6336 0.4608L331.008 361.0112a33.87392 33.87392 0 0 1-40.0896 9.8816L163.2768 314.9312c-31.8464-13.9776-66.048 14.2848-58.368 48.2304L222.3616 880.128a33.9456 33.9456 0 0 0 33.0752 26.4192h517.888c15.7184 0 29.3376-10.8032 32.9728-26.0608l122.624-515.2256c8.192-34.304-26.5728-63.0272-58.6752-48.4864z m-213.248 229.4784l-88.832 180.8384a50.26304 50.26304 0 0 1-45.3632 28.2624c-19.4048 0-36.8128-10.8544-45.3632-28.2624L388.608 546.2528c-6.912-14.08-2.7648-31.6928 10.5984-39.936 15.36-9.4208 35.0208-3.4304 42.752 12.288l70.5536 143.616c4.1984 8.5504 16.4352 8.5504 20.6336 0l70.5536-143.616a30.04416 30.04416 0 0 1 41.0112-13.312c14.4896 7.7312 19.5584 26.2144 12.288 40.96z"
                fill="#FCDFAE" p-id="35496"></path>
            <path
                d="M870.2464 271.5136l-119.0912 53.8624a33.8944 33.8944 0 0 1-40.0896-9.2672l-161.9968-201.8304c-13.7216-16.5888-39.2192-16.384-52.6336 0.4608L331.008 315.6992a33.87392 33.87392 0 0 1-40.0896 9.8816L163.2768 269.6192c-31.8464-13.9776-66.048 14.2848-58.368 48.2304l117.4528 516.9664a33.9456 33.9456 0 0 0 33.0752 26.4192h517.888c15.7184 0 29.3376-10.8032 32.9728-26.0608l122.624-515.2256c8.192-34.304-26.5728-62.976-58.6752-48.4352z m-213.248 229.4784l-88.832 180.8384a50.26304 50.26304 0 0 1-45.3632 28.2624c-19.4048 0-36.8128-10.8544-45.3632-28.2624L388.608 500.992c-6.912-14.08-2.7648-31.6928 10.5984-39.936 15.36-9.4208 35.0208-3.4304 42.752 12.288l76.5952 155.9552c1.7408 3.5328 6.7584 3.5328 8.4992 0l76.5952-155.9552a30.04416 30.04416 0 0 1 41.0112-13.312c14.5408 7.68 19.6096 26.1632 12.3392 40.96z"
                fill="#F8B62D" p-id="35497"></path>
        </svg> <span>vip3受</span></p>
    {this.state.tracks.map((v,i)=>{
        return <li key={i} style={{display:"flex"}} className={"gequ"} onClick={this.liplay.bind(this,v,i)} >
            <div className={"gequ-one"}>{i+1}</div>
            <div className={"gequ-two"}>
            <p>{v.name}</p>
        <p>{v.ar.map((name,j)=>{
            if (j==v.ar.length-1){
                return name.name
            }else {
                return name.name+'/'
            }

        })} -{v.al.name}</p>
        </div>
            <div className={"gequ-three"}> <span style={{float:"right"}}><MoreOutlined  /></span></div>
        </li>
    })}
</div>
            {/*播放器*/}
            <div className={"bottom"} onClick={this.Play.bind(this)}>
                <div className={"bottom-left"}>
                    <div><img src="http://p1.music.126.net/h45t-PjjOhvyQg54-ZXFEA==/109951165517526814.jpg" alt=""/></div>
                    <p>冬眠-思安</p>
                </div>
                <div className={"bottom-right"}>
                    <span>
                         <PlayCircleOutlined />
                    </span>
                   <span>
                         <MenuUnfoldOutlined />
                   </span>

                </div>

            </div>
            </div>
        );
    }
    Play(){
        this.props.history.push({pathname:"/play"})
    }
    liplay(v,i){
        this.props.history.push({pathname:"/play",state:{tracks:this.state.dataArray,id:v.id,idArray:this.state.idArray,index:i}})
    }
    componentDidMount() {
        console.log(this.state.id)
        Fetch.get(`http://localhost:3000/playlist/detail?id=${this.state.id}`).then(data=>{
            console.log(data.playlist.tracks)
            let AddArray=[];
            let  DataArrat=[];
            data.playlist.tracks.forEach((tiem,index)=>{
                AddArray.push(tiem.id)
                DataArrat.push({name:tiem.name,picUrl:tiem.al.picUrl,author:tiem.ar})
            })
            console.log(AddArray);
            this.setState((state,props)=>{
                return {tracks:data.playlist.tracks,
                    creator:data.playlist.creator,
                    idArray:AddArray,
                   dataArray: DataArrat
                }
            })
        })
    }
}

export default Song;